<style lang="scss" scoped>
    .inputCont {
        padding: 5px 30px 0 5px;
        border: 1px solid rgba(34, 36, 38, 0.15);
        color: rgba(0, 0, 0, 0.87);
        min-width: 300px;
        min-height: 32px;
        border-radius: 4px;
        display: flex;
        position: relative;
        flex-wrap: wrap;

        >.el-tag {
            display: inline-block !important;
            margin: 0 5px 5px 0;
        }

        >input {
            flex: 1;
            min-width: 50px;
            border: 0;
            width: 100%;
            margin: 0 0 5px 0;
            text-decoration: underline;
            font-size: 12px;
            outline: medium;
            text-indent: 10px;
            &::-webkit-input-placeholder{
                color: #C4C7CF;
            }

            &:-moz-placeholder{
                color: #C4C7CF;
            }

            &::-moz-placeholder{
                color: #C4C7CF;
            }

            &:-ms-input-placeholder{
                color: #C4C7CF;
            }
        }

        >.icon {
            position: absolute;
            top: 50%;
            right: 5px;
            margin-top: -9px;
            z-index: 2;
            color: #777;
            background: #fff;
        }

        &:hover {
            >.icon.remove {
                cursor: pointer;
                visibility: visible;
            }
        }

        >.icon.remove {
            visibility: hidden;
            font-size: 16px;

            &:hover {
                color: #000;
            }
        }
    }

</style>
<template>
    <div class="inputCont">
        <el-tag size="mini" closable v-for="(item,index) in items" :key="index" @close="handleClose(item)">{{item}}
        </el-tag>
        <input :readonly="disableKeyboard" @keyup.enter="addVal" @keyup.delete="delVal" v-model="val" type="text"
            :placeholder="placeholderNew" />
        <i class="icon cubes"></i>
        <el-tooltip content="清空所选内容" placement="bottom-end" v-show="items.length > 0">
            <i class="icon remove circle" @click.stop="clearAll"></i>
        </el-tooltip>
    </div>
</template>
<script>
    export default {
        name: 'ui-tagging-input',
        props: {
            modelLabel: null,
            duplicate: {
                type: Boolean,
                default: false
            },
            disableKeyboard: {
                type: Boolean,
                default: false
            },
            value: {
                request: true
            },
            placeholder: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                val: null,
                item: ''
            }
        },
        mounted() {},
        computed: {
            // v-modle
            items: {
                get() {
                    if (this.value && this.value !== '') {
                        return this.value.split(',')
                    }
                    return []
                },
                set(val) {
                    if (val.length < 1) {
                        this.$emit('input', '')
                        this.$emit('change', '', this.item)
                        return false
                    }
                    this.$emit('input', val.join())
                    this.$emit('change', val.join(), this.item)
                }
            },
            placeholderNew() {
                return this.value && this.value.length > 0 ? '' : this.placeholder
            }
        },
        methods: {
            //点击回车按钮
            addVal() {
                if (this.val.trim() === '') return false;
                let _cache = [...this.items] // 创建一个缓存忽略vue监听
                _cache.push(this.val.trim())
                this.val = '' // 置空input
                _cache = this.duplicate ? _cache : new Set(_cache) // 剔重
                // console.log('add', [..._cache])
                this.$set(this, 'items', [..._cache])
                this.items = [..._cache]
                // console.log(this.items)
            },
            //点击回退或删除按钮
            delVal() {
                if (this.items.length < 1) return false;
                let _cache = [...this.items] // 创建一个缓存忽略vue监听
                let idx = _cache.length - 1
                if (this.val === '' || this.val === null) {
                    _cache.splice(idx, 1)
                }
                this.$set(this, 'items', _cache)
            },
            //点击坨坨上面的叉叉
            handleClose(tag) {
                this.item = tag
                let _cache = [...this.items] // 创建一个缓存忽略vue监听
                this.$emit('delItem', _cache.indexOf(tag))
                _cache.splice(_cache.indexOf(tag), 1);
                this.$set(this, 'items', _cache)
            },
            //清空所有
            clearAll() {
                this.$set(this, 'items', [])
            }
        }
    }

</script>
